<template>
  <div class="p-4" style="background-color: #333333;">
    <DateClock></DateClock>

    <template v-if="isLoading">
      <!-- 显示正在加载的提示或占位符 -->
      <div>Loading...</div>
    </template>

    <template v-else>
      <div class="v" style="height: 77vh;" v-if="d.value.lunarDate">
        <el-row :gutter="20" justify="space-between">
          <el-col :span="6" class="p-4">
            <ListItem
              :d="d"
              :img="'https://zt-1304966785.cos.ap-nanjing.myqcloud.com/太极.svg'"
              :colorClass="'text-blue-500'"
            ></ListItem>
          </el-col>
          <el-col :span="12" class="p-4">
            <ListItem :d="d" :img="'https://zt-1304966785.cos.ap-nanjing.myqcloud.com/J今.svg'"></ListItem>
          </el-col>
          <el-col :span="6" class="p-4">
            <ListItem
              :d="d"
              :img="'https://zt-1304966785.cos.ap-nanjing.myqcloud.com/佛珠.svg'"
              :colorClass="'text-yellow-500'"
            ></ListItem>
          </el-col>
        </el-row>

        <el-row :gutter="20" justify="space-between">
          <el-col :span="12" class="">
            <Dono :d="d" :txt="'宜'"></Dono>
          </el-col>
          <el-col :span="12" class="">
            <Dono :d="d" :txt="'忌'"></Dono>
          </el-col>
        </el-row>

        <el-row :gutter="20" justify="space-between">
          <el-col :span="12" class="p-4">
            <DateDoa :d="d"></DateDoa>
          </el-col>
          <el-col :span="12" class="p-4">
            <div class="card2 head3">
              <div
                v-if="d.value"
                class="padding-sm bg-flex-shadow border-solid border-white border-2 justify-between h-16 p-2 text-center text-white"
                style="display: flex"
              >
                <div
                  v-for="o in d.value.ganZhi.split('-')"
                  v-bind:key="o"
                  class="p-3 text-white text-center bg-gray-500"
                >
                  {{ o }}
                </div>
              </div>

              <div
                v-if="d.value"
                class="padding-sm bg-flex-shadow border-solid border-white border-2 justify-between h-16 p-2 text-center text-white mt-2"
                style="display: flex"
              >
                <div
                  v-for="o in d.value.naYin.split('-')"
                  v-bind:key="o"
                  :class="[getClassByElement(o)]"
                  class="p-2 text-white text-center border-white"
                  style="border-radius: 4px"
                >
                  {{ o }}
                </div>
              </div>

              <div
                v-if="d.value"
                class="padding-sm margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2 justify-between h-42 p-2 text-center text-white mt-2"
              >
                <div class="text-red-300">{{ d.value.pengZu }}</div>

                <div v-html="insertNewLines(d.value.xiu[3])" class="mt-1"></div>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="card2">
          <el-row :gutter="20" justify="space-between">
            <el-col :span="6" class="px-4">
              <div
                v-if="d.value"
                style="border-radius: 5px"
                class="text-center text-white mt-2 border-white border-2 border-border border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
              >
                <div class="bg-purple-500">四方</div>
                {{ d.value.siGong }}
              </div>
            </el-col>
            <el-col :span="6" class="px-4">
              <div
                v-if="d.value"
                style="border-radius: 5px"
                class="text-center text-white mt-2 border-white border-2 border-border border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
              >
                <div class="bg-purple-500">星宿</div>
                {{ d.value.xiu[0] + '-' + d.value.xiu[2] }}
              </div>
            </el-col>
            <el-col :span="6" class="px-4">
              <div
                v-if="d.value"
                style="border-radius: 5px"
                class="text-center text-white mt-2 border-white border-2 border-border border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
              >
                <div class="bg-purple-500">四神</div>
                {{ d.value.siShen }}
              </div>
            </el-col>
            <el-col :span="6" class="px-4">
              <div
                v-if="d.value"
                style="border-radius: 5px"
                class="text-center text-white mt-2 border-white border-2 border-border border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
              >
                <div class="bg-purple-500">七政</div>
                {{ d.value.qiZheng }}
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20" justify="space-between">
            <el-col :span="6" class="px-4">
              <div
                v-if="d.value"
                style="border-radius: 5px"
                class="text-center text-white mt-2 border-white border-2 border-border border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
              >
                <div class="bg-purple-500">月相</div>
                {{ d.value.yueXiang }}
              </div>
            </el-col>
            <el-col :span="6" class="px-4">
              <div
                v-if="d.value"
                style="border-radius: 5px"
                class="text-center text-white mt-2 border-white border-2 border-border border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
              >
                <div class="bg-purple-500">值星</div>
                {{ d.value.zhiXing }}
              </div>
            </el-col>
            <el-col :span="6" class="px-4">
              <div
                v-if="d.value"
                style="border-radius: 5px"
                class="text-center text-white mt-2 border-white border-2 border-border border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
              >
                <div class="bg-purple-500">{{ d.value.lu.split(',')[0] }}</div>
                {{ d.value.lu.split(',')[1] == null ? '空' : d.value.lu.split(',')[1] }}
              </div>
            </el-col>
            <el-col :span="6" class="px-4">
              <div
                v-if="d.value"
                style="border-radius: 5px"
                class="text-center text-white mt-2 border-white border-2 border-border border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
              >
                <div class="bg-purple-500">生肖</div>
                {{ d.value.shengXiao }}
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20" justify="space-between">
            <el-col :span="6" class="px-4">
              <div
                v-if="d.value"
                style="border-radius: 5px"
                class="text-center text-white mt-2 border-white border-2 border-border border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
              >
                <div class="bg-purple-500">六耀</div>
                {{ d.value.liuYao }}
              </div>
            </el-col>
            <el-col :span="6" class="px-4">
              <div
                v-if="d.value"
                style="border-radius: 5px"
                class="text-center text-white mt-2 border-white border-2 border-border border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
              >
                <div class="bg-purple-500">旬空</div>
                {{ d.value.xunKong[0] }}
              </div>
            </el-col>
            <el-col :span="6" class="px-4">
              <div
                v-if="d.value"
                style="border-radius: 5px"
                class="text-center text-white mt-2 border-white border-2 border-border border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
              >
                <div class="bg-purple-500">旬空</div>
                {{ d.value.xunKong[1] }}
              </div>
            </el-col>
            <el-col :span="6" class="px-4">
              <div
                v-if="d.value"
                style="border-radius: 5px"
                class="text-center text-white mt-2 border-white border-2 border-border border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
              >
                <div class="bg-purple-500">旬空</div>
                {{ d.value.xunKong[2] }}
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20" justify="space-between">
            <el-col :span="6" class="px-4">
              <div
                v-if="d.value"
                style="border-radius: 5px"
                class="text-center text-white mt-2 border-white border-2 border-border border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
              >
                <div class="bg-purple-500">天神</div>
                {{ d.value.tianShen[0].split(':')[1] }}
              </div>
            </el-col>
            <el-col :span="6" class="px-4">
              <div
                v-if="d.value"
                style="border-radius: 5px"
                class="text-center text-white mt-2 border-white border-2 border-border border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
              >
                <div class="bg-purple-500">时神</div>
                {{ d.value.tianShen[1].split(':')[1] }}
              </div>
            </el-col>
            <el-col :span="6" class="px-4">
              <div
                v-if="d.value"
                style="border-radius: 5px"
                class="text-center text-white mt-2 border-white border-2 border-border border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
              >
                <div class="bg-purple-500">日冲</div>
                {{ d.value.chongSha[0].split(':')[1] }}
              </div>
            </el-col>
            <el-col :span="6" class="px-4">
              <div
                v-if="d.value"
                style="border-radius: 5px"
                class="text-center text-white mt-2 border-white border-2 border-border border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
              >
                <div class="bg-purple-500">日煞</div>
                {{ d.value.chongSha[1].split(':')[1] }}
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20" justify="space-between">
            <el-col :span="6" class="px-4">
              <div
                v-if="d.value"
                style="border-radius: 5px"
                class="text-center text-white mt-2 border-white border-2 border-border border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
              >
                <div class="bg-purple-500">时冲</div>
                {{ d.value.chongSha[2].split(':')[1] }}
              </div>
            </el-col>
            <el-col :span="6" class="px-4">
              <div
                v-if="d.value"
                style="border-radius: 5px"
                class="text-center text-white mt-2 border-white border-2 border-border border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
              >
                <div class="bg-purple-500">时煞</div>
                {{ d.value.chongSha[3].split(':')[1] }}
              </div>
            </el-col>
            <el-col :span="6" class="px-4">
              <div
                v-if="d.value"
                style="border-radius: 5px"
                class="text-center text-white mt-2 border-white border-2 border-border border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
              >
                <div class="bg-purple-500">节日</div>
                {{ d.value.otherFestivals == '' ? '无' : d.value.otherFestivals }}
              </div>
            </el-col>
            <el-col :span="6" class="px-4">
              <div
                v-if="d.value"
                style="border-radius: 5px"
                class="text-center text-white mt-2 border-white border-2 border-border border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
              >
                <div class="bg-purple-500">节气</div>
                {{ d.value.jieQi == '' ? '无' : d.value.jieQi }}
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20" justify="space-between">
            <el-col :span="6" class="px-4">
              <div
                v-if="d.value"
                style="border-radius: 5px"
                class="text-center text-white mt-2 border-white border-2 border-border border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
              >
                <div class="bg-purple-500">数九</div>
                {{ d.value.shuJiu }}
              </div>
            </el-col>
            <el-col :span="6" class="px-4">
              <div
                v-if="d.value"
                style="border-radius: 5px"
                class="text-center text-white mt-2 border-white border-2 border-border border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
              >
                <div class="bg-purple-500">三伏</div>
                {{ d.value.fu == '' ? '无' : d.value.fu }}
              </div>
            </el-col>
            <el-col :span="12" class="px-4">
              <div
                v-if="d.value"
                style="border-radius: 5px"
                class="text-center text-white mt-2 border-white border-2 border-border border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
              >
                <div class="bg-purple-500">物候</div>
                {{ d.value.wuHou == '' ? '无' : d.value.wuHou }}
              </div>
            </el-col>
          </el-row>

          <el-row justify="space-between" :gutter="20">
            <el-col :span="6">
              <div
                v-if="d.value"
                class="padding-sm margin-xs mt-2 radius bg-flex-shadow shadow-blur border-solid border-white border-2 h-24 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
                style="display: flex; flex-wrap: wrap"
              >
                <div
                  class="bg-purple-500 h-6 m-1 p-1 text-white text-xs whitespace-nowrap text-center border-solid border-white"
                >
                  吉神
                </div>
                <div
                  v-for="o in sortByLength(d.value.jiShenXiongSha[0])"
                  v-bind:key="o"
                  class="h-6 m-1 p-1 bg-gray-500 text-white text-xs whitespace-nowrap text-center border-solid border-white"
                >
                  {{ o }}
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div
                v-if="d.value"
                class="jx padding-sm margin-xs mt-2 radius bg-flex-shadow shadow-blur border-solid border-white border-2 h-24 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
                style="overflow-y: auto"
              >
                <div class="bg-purple-500 text-center">九星</div>
                <div
                  v-for="o in d.value.jiuXing"
                  v-bind:key="o"
                  class="m-1 p-1 text-white text-xs text-left border-solid border-white bg-gray-500"
                >
                  {{ o }}
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div
                v-if="d.value"
                class="padding-sm margin-xs mt-2 radius bg-flex-shadow shadow-blur border-solid border-white border-2 h-24 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
                style="display: flex; flex-wrap: wrap"
              >
                <div
                  class="bg-purple-500 h-6 m-1 p-1 text-white text-xs whitespace-nowrap text-center border-solid border-white"
                >
                  凶煞
                </div>
                <div
                  v-for="o in sortByLength(d.value.jiShenXiongSha[1])"
                  v-bind:key="o"
                  class="h-6 m-1 p-1 bg-gray-500 text-white text-xs whitespace-nowrap text-center border-solid border-white"
                >
                  {{ o }}
                </div>
              </div>
            </el-col>
          </el-row>
          <div class="h-5"></div>
        </div>
      </div>
      
    </template>
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeUnmount } from 'vue';
import DateClock from './dateComponents/DateClock.vue';
import ListItem from './dateComponents/ListItem.vue';
import Dono from './dateComponents/Dono.vue';
import DateDoa from './dateComponents/DateDoa.vue';
//import { usedateStore } from '@/stores/dateStores.js';

//const dateStore = usedateStore();
import ax from '@/helper/axios.js'
import { ElMessage } from 'element-plus'
const d = reactive({});

const activeName = ref('日宜');
const activeName2 = ref('日忌');
const isLoading = ref(true);
async function loadData() {
  const result = await ax.get('/5001/api/Rss/GetLunarDate');
  console.log('result.value2', result);
  d.value = result;
  d.value.ryi = d.value.yj[0].join(', ');
  d.value.ryilist = d.value.ryi.split(',');
  d.value.rji = d.value.yj[1].join(', ');
  d.value.rjilist = d.value.rji.split(',');
  d.value.syi = d.value.yj[2].join(', ');
  d.value.syilist = d.value.syi.split(',');
  d.value.sji = d.value.yj[3].join(', ');
  d.value.sjilist = d.value.sji.split(',');
  d.value.daoli = d.value.dao.split('，')[0];
  d.value.foli = `${d.value.fo.split('(')[0].split('年')[0]}年`;
 // dateStore.setResult(result);
  console.log('d', d);

  isLoading.value = false;
}

loadData();
const now = new Date();
// 计算下一个小时的第一分钟的时间
const nextHour = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours() + 1, 1, 0);
// 计算当前时间到下一个小时第一分钟的时间差
const duay = nextHour.getTime() - now.getTime();

// 设置定时器，在时间差过去后调用loadData方法
let timer = setTimeout(() => {
  loadData();
  // 每隔一小时调用loadData方法
  setInterval(() => {
    loadData();
  }, 60 * 60 * 1000);
}, duay);

function sortByLength(array) {
  return array.sort(function (a, b) {
    return a.length - b.length;
  });
}
provide('sortByLength', sortByLength);
function getClassByElement(element) {
  // console.log(element, element.includes('金'))
  if (element.includes('金')) {
    return 'bg-yellow-500'; // 假设金色对应的背景色是黄色
  }
  if (element.includes('木')) {
    return 'bg-green-500'; // 木色对应的背景色是绿色
  }
  if (element.includes('水')) {
    return 'bg-blue-500'; // 水色对应的背景色是蓝色
  }
  if (element.includes('火')) {
    return 'bg-red-500'; // 火色对应的背景色是红色
  }
  if (element.includes('土')) {
    return 'bg-yellow-800'; // 土色对应的背景色是棕色
  }
  // return 'bg-gray-500'; // 默认背景色，如果没有匹配到任何一种
}
function insertNewLines(str) {
  const lines = str.replace(/。/g, '').split('，'); // 根据逗号分割句子
  let result = '';

  for (let i = 0; i < lines.length; i += 2) {
    // 每两小句一行
    const line = lines
      .slice(i, i + 2)
      .map((item) => item.trim())
      .join('，'); // 去除空格并拼接两小句
    result += `<div class="p-1">${line}</div>`; // 每一行放在 <div> 中
  }

  return result;
}

onBeforeUnmount(() => {
  // 在组件实例卸载前执行一些清理工作
  clearInterval(this.timer);
  timer = null;
});
</script>

<style>
.is-active {
  color: #fff !important;
}

.v::-webkit-scrollbar {
  width: 5px;
}

.jx::-webkit-scrollbar {
  width: 5px;
}
</style>

<style scoped lang="less">
.heading {
  font-size: 20px;
  text-transform: capitalize;
  font-weight: 700;
}

.card p:not(.heading) {
  font-size: 14px;
}

.card p:last-child {
  color: #e81cff;
  font-weight: 600;
}
</style>
